* {
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: #FFF;
    overflow: hidden;
}

canvas {
    background: #FFF;
}

html, body {
    height: 100%;
    user-select: none;
}

body {
    background-color: #000000;
}

svg {
    background-color: transparent;
    z-index: 9999;
}

video {
    position: absolute;
    z-index: 9;
}

.r-control {
    stroke: none;
    fill: #f1c83b;
}

.hidden {
    display: none;
}

.img-word {
    display: none;
}

.img-word.active {
    display: block;
}

.txt {
    font-size: 16px;
    font-family: "Microsoft YaHei UI";
    fill: #ffffff;
}

.btn-play_rate .btn-play_rate_img-on {
    display: none;
}

.btn-play_rate .btn-play_rate_img-off {
    display: block;
}

.btn-play_rate.active .btn-play_rate_img-on {
    display: block;
}

.btn-play_rate.active .btn-play_rate_img-off {
    display: none;
}

.ctrl-btn-txt {
    font-size: 22px;
    fill: #ffffff;
    font-family: "Times New Roman";
}

.btn-play.pause .play-item {
    display: block;
}

.btn-play.pause .pause-item {
    display: none;
}

.btn-play.play .play-item {
    display: none;
}

.btn-play.play .pause-item {
    display: block;
}

.g-help {
    display: none;
}

.g-help.active {
    display: block;
}

.img-btn {
    cursor: pointer;
}

.txt-title {
    font-size: 44px;
    fill: #FFFFFF;
    font-family: "Times New Roman";
}

.btn-sound {
    fill: url(#soundOn);
}

.btn-sound.off {
    fill: url(#soundOff);
}

.btn-word {
    fill: url(#wordOn);
}

.btn-word.off {
    fill: url(#wordOff);
}

.loading {
    display: none;
    position: absolute;
    background: url("../images/progress.gif") 50% 50% no-repeat;
    background-size: contain;
    z-index: 99999;
}

.loading.active {
    display: block;
}

.video-subtitle {
    background-color: transparent;
    mix-blend-mode: screen;
    position: absolute;
    z-index: 10;
}
